<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>我的车是:{{ car }}</h4>
		<h4>儿子的玩具: {{ toy }}</h4>
		<Child :car="car" :getToy="getToy"/>
  </div>
</template>
<!-- 
	`props`是使用频率最高的一种通信方式，常用与 ：父 ←→ 子。
	在这个案例中,我们要拿到儿子给的玩具,儿子也需要我们车
	我们通过props的方法传递数据
	- 若 **父传子**：属性值是**非函数**。
 		若 **子传父**：属性值是**函数**。
		父穿子的时候,通过使用子组件,把我们的数据传送过去,并且直接传数据,不穿函数
		而子传父的时候,我们要通过函数的形式进行传参,比如这个给玩具的例子就很经典
		在封装的getToy函数中我们写一个形参,然后,在我们的子组件中,我们通过事件点击后
		去使用这个函数然后给一个参数给父组件接受........
		不一定只用事件,也可以利用gouzi
	
 -->
<script setup lang="ts" name="Father">
import Child from "./Child.vue"
import { ref } from "vue";
let car = ref("奔驰")
const toy = ref("")

function getToy(value: string) {
	toy.value = value

}

</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}
</style>